<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 条件渲染：类似于原生js里面的条件语句 -->
    <!-- v-if:类似于 if -->
    <!-- v-else-if:类似于 else if -->
    <!-- v-else:类似于 else -->
    <div id="app">
        <!-- 注意： -->
        <!-- 1.条件的错误写法：0<score<60 -->
        <!-- 2.v-else-if 和 v-else 必须在v-if后面 -->
        <!-- 3.条件最后都会转成布尔值，当前面的某一个条件转成布尔值为true,后面的所有条件都不会再去判断了 -->
        <!-- 方法一： -->
        <h1 v-if="score>=0 && score<60">不合格</h1>
        <!-- <h1 v-if="true">不合格</h1> -->
        <h1 v-else-if="score>=60 && score<80">一般</h1>
        <h1 v-else-if="score>=80 && score<=100">优秀</h1>
        <h1 v-else>分数有误</h1>

        <!-- 方法二：当判断条件很复杂的时候，可以使用计算属性 -->
        <h1>{{res}}</h1>

    </div>
    <script src="./vue.js"></script>
    <script>
        let app=new Vue({
            el:"#app",
            data:{
                score:89
            },
            computed:{
                res(){
                    if(0<=this.score && this.score<60){
                        return "不合格";
                    }else if(60<=this.score && this.score<80){
                        return "一般";
                    }else if(80<=this.score && this.score<=100){
                        return "优秀";
                    }else{
                        return "分数有误";
                    }
                }
            }

        })
    </script>
</body>
</html>